<template>
  <el-affix>
    <div class="center">
      <div class="login-windows">
      <!--            登陆界面整体-->
      <div class="login-item">
        <!--                左边部分-->
        <div class="login-left">
          <h2>欢迎来到智慧党建</h2>
          <h3>登录后解锁更多功能</h3>
        </div>
        <!--                右边部分-->
        <div class="login-right">
          <!--                    关闭弹窗组件-->
          <div class="login-close">
            <div class="login-close-svg" @click="closeLoginView">
            </div>
          </div>
          <!--                    右边登陆方式选择头部-->
          <header class="login_right-header">
            <ul class="login-header-module">
              <li class="login-header-list" v-for="(item,index) in loginType">
                <div class="login-select" :class="{'login-select-click':index===currentLoginType}" @click="changeLogin(item.key,index)">
                  {{item.value}}
                </div>
              </li>
            </ul>
          </header>
          <LoginScan v-if="currentLoginType===LoginType.QR_SCAN_LOGIN"></LoginScan>
          <PasswordLogin v-if="currentLoginType===LoginType.PASSWORD_LOGIN"></PasswordLogin>
          <PhoneCodeLogin v-if="currentLoginType===LoginType.PHONE_LOGIN"></PhoneCodeLogin>
          <!--                    公共部分-->
          <!--                    qq和微信登陆-->
          <footer class="login-footer">
            <div class="login-footer-item">
              <div class="login-footer-svg login-footer-svg-1"></div>
              <span>QQ登录</span>
            </div>
            <div class="login-footer-item">
              <div class="login-footer-svg login-footer-svg-2"></div>
              <span>微信登录</span>
            </div>

          </footer>

        </div>
      </div>
    </div>
    </div>
  </el-affix>




</template>

<script setup>

import LoginScan from "./components/PhoneScanLogin.vue";
import {pageStore} from "../../store/page.js";
import PasswordLogin from "./components/PasswordLogin.vue";
import PhoneCodeLogin from "./components/PhoneCodeLogin.vue";
import SuccessLogin from "./components/SuccessLogin.vue";
import {useRouter} from "vue-router";
import {ref} from "vue";
import {LoginType} from "../../enums/LoginTypeEnum.js";
const pageStatus = pageStore()

const router = useRouter()

const currentLoginType =ref(0)

const scaned = ref(false)

const loginType = ref([
  {
    key:'phoneScan',
    value:"扫码登录",
  },{
    key:'password',
    value:"密码登录",
  },{
    key:'phoneCode',
    value:"短信登录",
  }
])

// 关闭登录窗口
const closeLoginView=()=>{
  pageStatus.setLoginPageStatus(false)
}

// 切换登录方式
const changeLogin = (select,index)=>{
  currentLoginType.value = index
}

</script>

<style scoped>
.center{
  width:100%;
  //position:absolute;
  //background-color: yellow;
  z-index: 999;
  position: fixed;
  left:0;
  top:0;
  margin: 0 auto;
}
.login-windows{
  width:100%;
  height:100vh;
  z-index: 999;
  position: relative;
  background-color:rgba(0,0,0,0.5);
}
.login-item{
  position: absolute;
  /*width:72rem;*/
  width:100%;
  height:100%;
  width:72rem;
  height:51.2rem;
  /*height:51.2rem;*/
  margin: 0 auto;
  /*background-color: pink;*/
  display: flex;
  left: 20%;
  top:10%;
  transform: translate(20%,15%);
  /*overflow: hidden;*/
}
.login-left{
  border-radius:2.5rem 0 0 2.5rem;
  width:30rem;
  height:51.2rem;
  text-align: center;
  color:rgba(255, 255, 255, 1);
  font-family: 新宋体;
  position: relative;
  /*background-color:rgba(156, 0, 0, 1);*/
  background-size:cover;
  background-repeat: no-repeat;
  background-position:center;
}
.login-left h2{
  font-size: 3rem;
  margin-top:21rem;
  margin-bottom:1.5rem;
}
.login-left h3 {
  font-size: 1.8rem;
}
/*.login-decoration{*/
/*    !*width:30rem;*!*/
/*    !*height:50rem;*!*/
/*    !*bottom:0;*!*/
/*    !*left:0;*!*/
/*    !*position: absolute;*!*/
/*    width:100%;*/
/*    height:100%;*/
/*    */
/*}*/
.login-right{
  position: relative;
  flex: 1;
  border-radius:0 2.5rem 2.5rem 0;
  /*padding-top: 4rem;*/
  background-color: white;
  padding: 4rem 2.7rem 0 2.7rem;
  padding: 1.5rem 2.7rem 0 2.7rem;
}
.login-close{
  position: absolute;
  right:-1rem;
  top:-0.8rem;
  width:100%;
  display: flex;
  justify-content: right;
  margin-bottom: 0.5rem;
}

.login-close-svg{
  /*margin-top: 1rem;*/
  cursor: pointer;
  width:3rem;
  height:3rem;
  background-color:rgba(156, 0, 0, 1);
  background-size: 2rem 2rem;
  background-position: center;
  border-radius: 50%;
  background-repeat: no-repeat;
}

.login_right-header{
  height:3rem;
  width:100%;
  margin-top: 2.5rem;
  font-size: 1.5rem;
}
.login-header-module{
  width:100%;
  height:100%;
  display: flex;
  justify-content: space-between;
  /*background-color: green;*/
}
.login-header-list{
  height:100%;
  line-height: 3rem;
  width:8.5rem;
  list-style: none;
  font-weight: bold;

}
.login-select{
  text-align: center;
  width:100%;
  letter-spacing: 1px;
  color:rgba(0, 0, 0, 1);
  font-size: 1.8rem;
  cursor: pointer;
}
.login-select-click{
  color:rgba(156, 0, 0, 1);
  border-bottom: 3px solid rgba(156, 0, 0, 1);
}

/*底部/////////////////////////*/
.login-footer{
  width:55%;
  height:6rem;
  display: flex;
  position: absolute;
  left: 9.5rem;
  bottom: 3rem;
  /*background-color: green;*/
  justify-content: space-between;

}
.login-footer-item{
  /*margin-top: 7rem;*/
  display: flex;
}
.login-footer-svg{
  cursor: pointer;
  width:4rem;
  height:4rem;
  background-size: 3rem 3rem;
  background-position: center;
  background-repeat: no-repeat;
}
.login-footer-item span{
  line-height: 4rem;
  font-size: 1.5rem;
  font-family: 新宋体;
  color:rgba(128, 128, 128, 1);
  /*margin-left: 1rem;*/
  cursor: pointer;
}



</style>
